<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Tooltip 文字提示</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.tooltip-base-box .center {
  justify-content: center;
}
/* .tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
} */

.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}
.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。</p>
	<p class="desc">使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。 如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。</p>
	<div class="tooltip-base-box">
		<div class="row center">
			<el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start">
				<el-button>top-start</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="Top Center prompts info" placement="top">
				<el-button>top</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="Top Right prompts info" placement="top-end">
				<el-button>top-end</el-button>
			</el-tooltip>
		</div>
		<div class="row">
			<el-tooltip class="box-item" effect="dark" content="Left Top prompts info" placement="left-start">
				<el-button>left-start</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="Right Top prompts info" placement="right-start">
				<el-button>right-start</el-button>
			</el-tooltip>
		</div>
		<div class="row">
			<el-tooltip class="box-item" effect="dark" content="Left Center prompts info" placement="left">
				<el-button class="mt-3 mb-3">left</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="Right Center prompts info" placement="right">
				<el-button>right</el-button>
			</el-tooltip>
		</div>
		<div class="row">
			<el-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
				<el-button>left-end</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end">
				<el-button>right-end</el-button>
			</el-tooltip>
		</div>
		<div class="row center">
			<el-tooltip class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
				<el-button>bottom-start</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom">
				<el-button>bottom</el-button>
			</el-tooltip>
			<el-tooltip class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
				<el-button>bottom-end</el-button>
			</el-tooltip>
		</div>
	</div>
	
	<el-divider content-position="left">主题</el-divider><!-- =============================================================== -->
	<p class="desc">Tooltip 组件内置了两个主题：dark和light。</p>
	<p class="desc">通过设置 effect 来修改主题，默认值为 dark.</p>
	<el-tooltip content="Top center" placement="top">
		<el-button>Dark</el-button>
	</el-tooltip>
	<el-tooltip content="Bottom center" placement="bottom" effect="light">
		<el-button>Light</el-button>
	</el-tooltip>
	<el-tooltip content="Bottom center" effect="customized">
		<el-button>Customized theme</el-button>
	</el-tooltip>
	
	<el-divider content-position="left">更多内容的文字提示（推荐）</el-divider><!-- =============================================================== -->
	<p class="desc">展示多行文本或者是设置文本内容的格式</p>
	<p class="desc">用具名 slot content，替代tooltip中的content属性。</p>
	<el-tooltip placement="top">
		<template #content>
			multiple lines <br />
			second line 
		</template>
		<el-button>Top center</el-button>
	</el-tooltip>
	
	<el-divider content-position="left">高级扩展</el-divider><!-- =============================================================== -->
	<p class="desc">除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：transition 属性可以定制显隐的动画效果，默认为fade-in-linear。</p>
	<p class="desc">如果需要关闭 tooltip 功能，disabled 属性可以满足这个需求， 你只需要将其设置为 true。事实上，Tooltip 是一个基于 ElPopper 的扩展，您可以使用 ElPopper 中允许的任何属性。</p>
	<el-tooltip :disabled="disabled" content="点击按钮，开启/关闭 Tooltip" placement="bottom" effect="light">
		<el-button @click="disabled = !disabled">{{ disabled ? '关闭' : '开启' }}了Tooltip</el-button>
	</el-tooltip>
	
	<el-divider content-position="left">显示 HTML 内容</el-divider><!-- =============================================================== -->
	<p class="desc">内容属性可以设置为 HTML 字符串。</p>
	<el-tooltip content="<span>The content can be <strong style='color:red;'>HTML</strong></span>" raw-content>
		<el-button>hover me</el-button>
	</el-tooltip>
	
	<el-divider content-position="left">虚拟触发</el-divider><!-- =============================================================== -->
	<p class="desc">有时候我们想把 tooltip 的触发元素放在别的地方，而不需要写在一起，这时候就可以使用虚拟触发。</p>
	<el-button @click="toClick">点击触发</el-button>
	<el-tooltip v-model:visible="visible" content="Top center" placement="top">
		<el-button>bind</el-button>
	</el-tooltip>
	
	<el-divider content-position="left">单例模式</el-divider><!-- =============================================================== -->
	<p class="desc">Tooltip 可以作为单例，也就是是说你可以同时有多个触发同一个 tooltip 的触发元素，这个功能是在 虚拟触发 的基础上开发的。</p>
	<div>
		<el-button v-for="i in 3" :key="i" @mouseover="(e) => (buttonRef = e.currentTarget)" @click="visible2 = !visible2">点击开启Tooltip</el-button>
	</div>
	<el-tooltip ref="tooltipRef" v-model:visible="visible2" :popper-options="popper_options" :virtual-ref="buttonRef"
		virtual-triggering trigger="click" popper-class="singleton-tooltip">
		<template #content>
			<span> Some content </span>
		</template>
	</el-tooltip>
	
	<el-divider content-position="left">受控模式</el-divider><!-- =============================================================== -->
	<p class="desc">Tooltip 可以通过父组件使用 :visible 来控制它的显示与关闭。</p>
	<el-tooltip :visible="visible3">
		<template #content>
			<span>Content</span>
		</template>
		<el-button @mouseenter="visible3 = true" @mouseleave="visible3 = false">
			Hover me
		</el-button>
	</el-tooltip>
	
	<el-divider content-position="left">自定义动画</el-divider><!-- =============================================================== -->
	<p class="desc">Tooltip 可以自定义动画，你可以根据需要自行设置所需的动画方法。</p>
	<el-tooltip content="I am an el-tooltip">
		<el-button>trigger me</el-button>
	</el-tooltip>
	
	
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			disabled: false,
			visible: false,
			visible2: false,
			visible3: false,
			popper_options: {
				modifiers: [
					{
						name: 'computeStyles',
						options: {adaptive: false,enabled: false,},
					},
				],
			},
		}
	},
	methods:{
		toClick(){
			this.visible = !this.visible;
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>